<template>
    <div class="index">
        <!--        搜索-->
        <van-row>
            <van-col span="20">
                <van-search
                        v-model="value"
                        shape="round"
                        background="#FFFFFF"
                        placeholder="收缩爆款商品...."
                        @focus="fn"
                />
            </van-col>
            <van-col span="2" class="message"><span class="iconfont">&#xe6a2</span></van-col>
        </van-row>
        <!--        轮播-->
        <div class="lunbo">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(v, index) in guanggaoData" :key="index">
                    <img :src="'http://172.17.4.241:8887/upload'+v.adImg" style="width: 90%;height: 200px;" @click="click(v.adUrl)" >
                </van-swipe-item>
            </van-swipe>
            <van-row type="flex" justify="space-around">
                <div class="font">
                    <van-col span="7"><span class="iconfont">&#xe628</span>正品保证</van-col>
                    <van-col span="9"><span class="iconfont">&#xe631</span>七天无理由退换货</van-col>
                    <van-col span="7"><span class="iconfont">&#xe8b0</span>假一赔十</van-col>
                </div>
            </van-row>
        </div>
        <!--        菜单展示-->
        <div class="mean">
            <van-row type="flex" >
                <template v-for="v in meanList">
                    <van-col span="6">
                        <div>
                            <div ><span class="iconfont " :class="v.menuBarIcon"></span></div>
                            <div>{{v.menuName}}</div>
                        </div>
                    </van-col>
                </template>
            </van-row>
        </div>
        <!--            限时秒杀-->
        <div class="miaosha">
            <h4>限时秒杀</h4>
            <p>距离结束还有:
                <van-count-down :time="time"/>
            </p>
        </div>
        <van-swipe :loop="false" :width="180" :height="160" >
            <div v-for="v in swipe" class="miaoshaList">
                <van-swipe-item>
                    <div>
                        <div>
                            <div>
                                <img :src="'http://172.17.4.241:8887/upload/'+v.goods.goodsImg"  alt="" >
                            </div>
                            <p>{{v.flashDesc}}</p>
                            <p>￥ <span>{{v.goods.goodsPrice}}</span></p>
                        </div>
                    </div>
                </van-swipe-item>
            </div>
            <template #indicator>
                <div class="custom-indicator"></div>
            </template>
        </van-swipe>
        <!--        精选推荐-->
        <div>
            <h4>精选推荐</h4>
            <template v-for="v in adviceListArr" >
                <van-card
                        tag="团购"
                        :price="v.goodsPrice"
                        :desc="'已拼'+v.goodsSale+'件'"
                        :title="v.goodsName"
                        :thumb="'/tu/'+v.goodsImg"
                        :origin-price="v.goodsMarketPrice"
                        @click="click(v.goodsId)"
                >
                    <template #num style="width: 50px" v-if="v.userIcon==null">
                        <van-image
                                round
                                width="2rem"
                                height="2rem"
                                :src="'/tu/'+v.userIcon"
                        />
                        <van-image
                                round
                                width="2rem"
                                height="2rem"
                                :src="'/tu/'+v.userIcon"
                                style="margin-left: -10px"
                        />
                    </template>
                </van-card>
            </template>
        </div>
    </div>
</template>

<script>
    import '../../../public/font/font_pgg50huqpa8/iconfont.css'
    import Vue from 'vue';
    import { Lazyload } from 'vant';

    Vue.use(Lazyload);
    export default {

        name: "shouye",
        data(){
            return{
                value:'',
                guanggaoData: [],
                meanList:[],
                time: 30 * 60 * 60 * 1000,
                a:false,
                swipe:[],
                active: 0,
                icon: {
                    active: 'https://img01.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                },
                adviceListArr:[],
            }
        },
        methods:{
            fn(){
                this.$router.push('./search')
            },

            //存储计时时间
            timeClick(){

                sessionStorage.setItem('time',this.time)
            },
            click(id){
                console.log(id)
                this.$store.dispatch('setGoodsid',id)
                this.$router.push('/shopList')
            },

        },
        created() {
            //计时器存储
            // if (this.time!=(30 * 60 * 60 * 1000)){
            //     this.time=sessionStorage.getItem('time')
            //     console.log(this.time)
            // }

            this.$axios.post('/api/group/list').then(res=>{
                console.log(res.data.data)
                if (res.data.data.length>0){
                    res.data.data.forEach(item=>{
                        item.goodsId=item.goods.goodsId
                        item.goodsImg=item.goods.goodsImg
                        item.goodsName=item.goods.goodsName
                        item.goodsPrice=item.goods.goodsPrice
                        item.goodsMarketPrice=item.goods.goodsMarketPrice
                        item.goodsSale=item.goods.goodsRealSale+item.goods.goodsVirtualSale
                        item.userIcon=item.leaderUser.userIcon
                        this.adviceListArr.push(item)
                    })
                }
            })
        },
        mounted() {
            this.$axios.post('/api/ad/adlist?limit=1000').then(res => {
                var arr = res.data.data
                arr.forEach((item, index) => {
                    if (item.adStatus == 0) {
                        this.guanggaoData.push(item)
                    }
                })
                // console.log(this.guanggaoData)
            })
            this.$axios.post('/api/menu/MenuBarList').then(res=>{
                console.log(res)
                var arr=res.data.data;
                arr.forEach(item=>{
                    if (item.menuStatus==0){
                        this.meanList.push(item)
                    }
                })
                console.log(this.meanList)

            })
            this.$axios.post('/api/flash/list?page=1&flashStatus=1').then(res=>{
                console.log(res.data.data)
                this.swipe=res.data.data
                // res.data.data.forEach((item,index)=>{
                //    // this.meanList[index].goodsId=item.goods.goodsId
                //    // this.meanList[index].goodsImg=item.goods.goodsImg
                //     this.meanList[index].flashDesc=item.flashDesc
                // })
                // console.log(this.swipe)
            })
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .index {
        margin-bottom: 50px;
    }

    .message {
        line-height: 54px;

    }

    .message span {
        font-size: 30px;
    }

    .lunbo {
        text-align: center;
    }

    .font {
        font-size: 12px;
        width: 100%;
    }

    .font span {
        color: #FFC80B;
    }

    .mean {
        text-align: center;
        margin-top: 20px;
    }

    .mean > div > div > div {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .mean > div > div > div > div:nth-child(1) {
        text-align: center;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        background: red;
    }

    .mean > div > div > div > div:nth-child(1) > span {
        font-size: 30px;

    }
    /*    秒杀*/
    .miaosha {
        text-align: left;
        margin: 20px 0 20px 0;
    }

    .miaosha > p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-size: 12px;
        color: #99B5D7;
    }

    .miaosha > p > div {
        color: #FF6633;
        font-size: 20px;
    }
    .miaoshaList > div>div{
        padding: 0 20px ;
    }
    .miaoshaList img{
        width: 100%;
        max-height: 100px;
    }

    .miaoshaList > div>div>div {
        margin-top: 4px;
        margin-bottom: 4px;
        height: 155px;
        box-shadow: 0px 0px 5px 5px #f2f2f2;
        border-radius: 5px;
    }

    .miaoshaList>div>div>div> p:nth-child(2) {
        font-size: 13px;
        text-align: center;
        margin: 7px 0;
    }

    .miaoshaList > div > div>div>p:nth-child(3) {
        color: #FF6633;
        text-align: center;
        font-size: 18px;

    }


    /*.miaosha{*/
    /*    text-align: left;*/
    /*    margin: 20px 0 20px 0 ;*/
    /*}*/
    /*.miaosha>p{*/
    /*    display: flex;*/
    /*    flex-wrap: wrap;*/
    /*    align-items: center;*/
    /*    font-size: 12px;*/
    /*    color:#99B5D7 ;*/
    /*}*/
    /*.miaosha>p>div{*/
    /*    color: #FF6633;*/
    /*    font-size: 20px;*/
    /*}*/
    /*.miaoshaList>div{*/
    /*    margin-left: 20px;*/
    /*    height: 155px;*/
    /*    box-shadow: 0px 1px 2px gray;*/
    /*}*/

    /*.miaoshaList>div>p:nth-child(2){*/
    /*    font-size: 13px;*/
    /*    text-align: center;*/
    /*    margin: 7px 0;*/
    /*}*/
    /*.miaoshaList>div>p:nth-child(3){*/
    /*    color: #FF6633;*/
    /*    text-align: center;*/
    /*    font-size: 18px;*/

    /*}*/
</style>